<template>
    <div class="area">
        <div class="area_Tit">
            <NavBar :tit="'区域筛选'"></NavBar>
        </div>
        <div class="area_house">
            <HouseCont></HouseCont>
        </div>
        <div class="areaCont">
            <van-tree-select
            height="437"
            :items="items.areaList"
            :active-id="activeId" @update:active-id="val => activeId = val"
            :main-active-index="activeIndex" @update:main-active-index="ind => activeIndex = ind"
            @click-nav="selectCity"
            @click-item="selectIndex"
            />
        </div>
        <HouseSure :tit="'区域筛选'" :select="items.selectPlot"></HouseSure>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { defineComponent , ref , onMounted, reactive, nextTick,toRef} from 'vue'
import {getHouseDatum,getCity} from '../../api/getDatum'
import {bus} from '../../utils/Bus'
export default defineComponent({
  setup(props,context) {
    let items = reactive({
        areaList:[],
        citLis:[],
        ciLis:[],
        cityList:[],
        selePlot:[],
        selectPlot:'',
        currentID:42,
    });

    let activeId = ref(0);
    let activeIndex = ref(1);

    const getCit = async () => {
       const citys = await getHouseDatum();
       items.citLis = citys.data.list;
    }

    // 获取全部城市
    const getCitys = async () => {
        const city = await getCity();

        items.ciLis = city.body

        items.ciLis.map((item,i) => {
            items.cityList.push({
                "text":item.label,
                "value":item.value
            })
        })
        
        nextTick(() => {
            items.areaList = items.cityList
        })
    }

    getCitys();

    const selectCity = (index) => {
        if(index !== items.currentID){
            Toast.fail('该城市暂无房源数据');
        }else{
            items.citLis.forEach((item,i) => {
                items.selePlot.push({
                    "text":item.house_title
                })
                items.areaList[items.currentID]['children'] = items.selePlot;
            })
        }
    }

    const selectIndex = (data) => {
        items.selectPlot = data.text;
    }

    onMounted(() => {
        getCit();
    })

    return {
        items,
        activeId,
        activeIndex,
        selectCity,
        selectIndex,
    }
  },
})
</script>

<style lang='less' scoped>
.area{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .area_Tit{
        width: 100%;
        height: 60px;
    }
    .areaCont{
        width: 100%;
        height: 437px;
        .van-tree-select{
            width: 100%;
            height: 437px;
        }
    }
}
</style>
